﻿@{
    ViewBag.Title = "Cart";
    Layout = "~/Views/Shared/_CartLayout.cshtml";
}
<script type="text/javascript">
    $(document).ready(function () {
        $('.box .form .dropdown .textbox input[type=text]').click(function () {
            $('.box .form .dropdown .dropdownItem').hide();
            $(this).parent().parent().find($('.dropdownItem')).css({ display: "none", 'z-index': "9999" }).show(400);
        });
        $('.box .form .dropdown .dropdownItem ul li').click(function () {
            $(this).parent().parent().parent().find($('.dropdownItem')).hide();
            $(this).parent().parent().parent().find($('.textbox input[type=text]')).val($(this).html());
        });

        $('.box').keypress(function (e) {
            if (e.keyCode == 27) {
                $('.dropdownItem').hide();
                $('.btnDel').hide();
            }
        });
        $('.iconDel').click(function () {
            $('.btnDel').hide();
            $(this).parent().find('.btnDel').show(400);
        });
        //$('.box').click(function () {
        //    if ($(this).find($('.dropdownItem')).attr("style") == "z-index: 9999; display: block;") {
        //        $('.dropdownItem').hide();
        //    }            
        //});

        //$('.box .form .textbox').click(function () {
        //    $('.box .form .textbox').css({ border: "3px solid #F0F0F0" });
        //    $(this).css({ border: "3px solid #d7416e" });
        //});
        //$('.box .form .textbox').focusout(function () {
        //    $('.box .form .textbox').css({ border: "3px solid #F0F0F0" });
        //})
        //$('.box .form .textbox textarea').click(function () {
        //    if ($(this).val() == "NỘI DUNG")
        //        $(this).val("");
        //});
        //$('.box .form .textbox textarea').focusout(function () {
        //    if ($(this).val() == "")
        //        $(this).val("NỘI DUNG");
        //})
    })
</script>

<div id="boxCart" class="box">
    <div class="form">
        <table id="tblCart">
            <thead>
                <tr class="header">
                    <td class="nameProd">Sản phẩm</td>
                    <td class="idProd">Mã sản phẩm</td>
                    <td class="colorProd">Màu sắc</td>
                    <td class="sizeProd">Kích cỡ</td>
                    <td class="priceProd">Giá</td>
                    <td class="quanProd">Số lượng</td>
                    <td class="totalProd">Thành tiền</td>
                    <td class="funcProd"></td>
                </tr>
            </thead>
            <tr class="item odd">
                <td class="nameProd">
                    <img src="~/Images/imgArt15.png" />
                    Bộ đồ nữ Windy màu xanh phối bèo cổ tím</td>
                <td class="idProd">SMV003</td>
                <td class="colorProd">
                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtColor" value="Xanh" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">Xanh</li>
                                <li class="itemDrop">Đỏ</li>
                                <li class="itemDrop">Tím</li>
                                <li class="itemDrop">Vàng</li>
                                <li class="itemDrop">Đen</li>
                                <li class="itemDrop">Trắng</li>
                                <li class="itemDrop">Hồng</li>
                            </ul>
                        </div>
                    </div>
                </td>
                <td class="sizeProd">

                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtSize" value="S" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">S</li>
                                <li class="itemDrop">XS</li>
                                <li class="itemDrop">M</li>
                                <li class="itemDrop">L</li>
                                <li class="itemDrop">XL</li>
                                <li class="itemDrop">XXL</li>
                            </ul>
                        </div>
                    </div>

                </td>
                <td class="priceProd">
                    <ul class="priceProd">
                        <li class="priceSale">355.000đ</li>
                        <li class="price">355.000đ</li>
                    </ul>
                </td>
                <td class="quanProd">
                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtQuant" value="1" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">1</li>
                                <li class="itemDrop">2</li>
                                <li class="itemDrop">3</li>
                                <li class="itemDrop">4</li>
                                <li class="itemDrop">5</li>
                                <li class="itemDrop">6</li>
                            </ul>
                        </div>
                    </div>

                </td>
                <td class="totalProd">355.000đ</td>
                <td class="funcProd">
                    <div class="btn">
                        <a href="#" class="iconDel"></a>
                        <a href="#" class="btnDel">Xóa</a>
                    </div>
                </td>
            </tr>
            <tr class="item even">
                <td class="nameProd">
                    <img src="~/Images/imgArt15.png" />
                    Bộ đồ nữ Windy màu xanh phối bèo cổ tím</td>
                <td class="idProd">SMV003</td>
                <td class="colorProd">
                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtColor" value="Xanh" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">Xanh</li>
                                <li class="itemDrop">Đỏ</li>
                                <li class="itemDrop">Tím</li>
                                <li class="itemDrop">Vàng</li>
                                <li class="itemDrop">Đen</li>
                                <li class="itemDrop">Trắng</li>
                                <li class="itemDrop">Hồng</li>
                            </ul>
                        </div>
                    </div>
                </td>
                <td class="sizeProd">

                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtSize" value="S" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">S</li>
                                <li class="itemDrop">XS</li>
                                <li class="itemDrop">M</li>
                                <li class="itemDrop">L</li>
                                <li class="itemDrop">XL</li>
                                <li class="itemDrop">XXL</li>
                            </ul>
                        </div>
                    </div>

                </td>
                <td class="priceProd">
                    <ul class="priceProd">
                        <li class="priceSale">355.000đ</li>
                        <li class="price">355.000đ</li>
                    </ul>
                </td>
                <td class="quanProd">
                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtQuant" value="1" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">1</li>
                                <li class="itemDrop">2</li>
                                <li class="itemDrop">3</li>
                                <li class="itemDrop">4</li>
                                <li class="itemDrop">5</li>
                                <li class="itemDrop">6</li>
                            </ul>
                        </div>
                    </div>

                </td>
                <td class="totalProd">355.000đ</td>
                <td class="funcProd">
                    <div class="btn">
                        <a href="#" class="iconDel"></a>
                        <a href="#" class="btnDel">Xóa</a>
                    </div>
                </td>
            </tr>
            <tr class="item odd">
                <td class="nameProd">
                    <img src="~/Images/imgArt15.png" />
                    Bộ đồ nữ Windy màu xanh phối bèo cổ tím</td>
                <td class="idProd">SMV003</td>
                <td class="colorProd">
                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtColor" value="Xanh" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">Xanh</li>
                                <li class="itemDrop">Đỏ</li>
                                <li class="itemDrop">Tím</li>
                                <li class="itemDrop">Vàng</li>
                                <li class="itemDrop">Đen</li>
                                <li class="itemDrop">Trắng</li>
                                <li class="itemDrop">Hồng</li>
                            </ul>
                        </div>
                    </div>
                </td>
                <td class="sizeProd">

                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtSize" value="S" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">S</li>
                                <li class="itemDrop">XS</li>
                                <li class="itemDrop">M</li>
                                <li class="itemDrop">L</li>
                                <li class="itemDrop">XL</li>
                                <li class="itemDrop">XXL</li>
                            </ul>
                        </div>
                    </div>

                </td>
                <td class="priceProd">
                    <ul class="priceProd">
                        <li class="priceSale">355.000đ</li>
                        <li class="price">355.000đ</li>
                    </ul>
                </td>
                <td class="quanProd">
                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtQuant" value="1" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">1</li>
                                <li class="itemDrop">2</li>
                                <li class="itemDrop">3</li>
                                <li class="itemDrop">4</li>
                                <li class="itemDrop">5</li>
                                <li class="itemDrop">6</li>
                            </ul>
                        </div>
                    </div>

                </td>
                <td class="totalProd">355.000đ</td>
                <td class="funcProd">
                    <div class="btn">
                        <a href="#" class="iconDel"></a>
                        <a href="#" class="btnDel">Xóa</a>
                    </div>
                </td>
            </tr>
            <tr class="item even">
                <td class="nameProd">
                    <img src="~/Images/imgArt15.png" />
                    Bộ đồ nữ Windy màu xanh phối bèo cổ tím</td>
                <td class="idProd">SMV003</td>
                <td class="colorProd">
                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtColor" value="Xanh" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">Xanh</li>
                                <li class="itemDrop">Đỏ</li>
                                <li class="itemDrop">Tím</li>
                                <li class="itemDrop">Vàng</li>
                                <li class="itemDrop">Đen</li>
                                <li class="itemDrop">Trắng</li>
                                <li class="itemDrop">Hồng</li>
                            </ul>
                        </div>
                    </div>
                </td>
                <td class="sizeProd">

                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtSize" value="S" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">S</li>
                                <li class="itemDrop">XS</li>
                                <li class="itemDrop">M</li>
                                <li class="itemDrop">L</li>
                                <li class="itemDrop">XL</li>
                                <li class="itemDrop">XXL</li>
                            </ul>
                        </div>
                    </div>

                </td>
                <td class="priceProd">
                    <ul class="priceProd">
                        <li class="priceSale">355.000đ</li>
                        <li class="price">355.000đ</li>
                    </ul>
                </td>
                <td class="quanProd">
                    <div class="dropdown">
                        <div class="textbox">
                            <input type="text" id="txtQuant" value="1" />
                            <div class="iconDrop"></div>
                        </div>
                        <div class="dropdownItem">
                            <ul class="lstDropItem">
                                <li class="itemDrop">1</li>
                                <li class="itemDrop">2</li>
                                <li class="itemDrop">3</li>
                                <li class="itemDrop">4</li>
                                <li class="itemDrop">5</li>
                                <li class="itemDrop">6</li>
                            </ul>
                        </div>
                    </div>

                </td>
                <td class="totalProd">355.000đ</td>
                <td class="funcProd">
                    <div class="btn">
                        <a href="#" class="iconDel"></a>
                        <a href="#" class="btnDel">Xóa</a>
                    </div>
                </td>
            </tr>
        </table>        
        <div class="button">
            <p class="totalMoney">Tổng tiền: <span style="color:#d80001;font-size:17px;margin-left:10px">1.803.000đ</span></p>
            <input type="button" value="GỬI ĐƠN HÀNG" id="btnSend" />
        </div>
    </div>
</div>
